<template>
  <!-- 查询 div-->
  <div v-if="'query' == props.mode">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="publisher" placeholder="发行商名称模糊查询"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button @click="requery" type="primary">查询</el-button>
          <el-button @click="reset" type="danger">重置</el-button>
          <el-button @click="showadd" type="warning">添加</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>

  <el-table :data="list" stripe>
    <el-table-column label="发行商名称" prop="publisher"></el-table-column>
    <el-table-column label="发行商简介" prop="intro"></el-table-column>
    <el-table-column label="发行商厂商创建时间">
      <template #default="scope">
        {{ tools.formatDate(scope.row.created, 'yyyy-MM-dd') }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          v-if="'query' == props.mode"
          @click="showModify(scope.row)"
          type="success"
          size="small"
          >修改</el-button
        >
        <el-button
          v-if="'query' == props.mode"
          @click="showDelete(scope.row)"
          type="danger"
          size="small"
          >删除</el-button
        >
        <el-button
          v-if="'selector' == props.mode"
          @click="selectType(scope.row)"
          type="success"
          size="small"
          >选择</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加的部分 -->
  <el-dialog v-model="avisible" title="添加游戏发行商" @closed="requery">
    <div>
      <el-form>
        <el-form-item>
          <el-input v-model="addInfo.publisher" placeholder="发行商名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="addInfo.intro" placeholder="发行商简介"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="addInfo.created"
            type="date"
            placeholder="开始时间"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="add" type="primary">添加</el-button>
    </template>
  </el-dialog>

  <!-- 修改的部分 -->
  <el-dialog v-model="modifyVisible" title="修改游戏发行商" @closed="requery">
    <div>
      <el-form-item>
        <el-input v-model="modifyIndo.publisher" placeholder="valve"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="modifyIndo.intro" placeholder="Valve是一家美国游戏开发商"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="modifyIndo.created"
          type="date"
          placeholder="开始时间"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>
    </div>

    <template #footer>
      <el-button @click="modify" type="primary">修改</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '@/js/ajax'
import { tools } from '@/js/tools'
import { ElMessage, ElMessageBox } from 'element-plus'

// #region 删除的部分
const showDelete = (info) => {
  ElMessageBox.confirm(`确定要删除${info.publisher}吗？`, '删除确认', {
    type: 'warning',
  }).then(() => {
    api.delete(`/crud/gamepublisher/${info.gpid}`, {}, (data) => {
      ElMessage({ message: data.message, type: data.success ? 'success' : 'error' })
    })
  })
}
// #endregion
// #region 修改的部分
const modifyVisible = ref(false)
const modifyIndo = ref({})
const showModify = (info) => {
  modifyVisible.value = true
  modifyIndo.value = tools.mergeJson(info)
}

const modify = () => {
  api.put('/crud/gamepublisher', modifyIndo.value, (data) => {
    ElMessageBox.alert(data.message, '修改结果')
  })
}
// #endregion
//#region 添加
const avisible = ref(false)
const addInfo = ref({
  publisher: '',
  intro: '',
  created: '',
})

const showadd = () => {
  addInfo.value = {
    publisher: '',
    intro: '',
  }
  avisible.value = true
}

const add = () => {
  api.post('/crud/gamepublisher', addInfo.value, (data) => {
    ElMessageBox.alert(data.message, '添加结果')
    if (data.success) {
      addInfo.value = {
        publisher: '',
        intro: '',
      }
    }
  })
}
// #endregion
//#region 查询数据
const list = ref([])
const page = ref({
  pageNumber: 1,
  pageSize: 10,
})

const publisher = ref('')

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const reset = () => {
  publisher.value = ''
  requery()
}

const query = () => {
  api.get(
    `/crud/gamepublisher/${page.value.pageSize}/${page.value.pageNumber}`,
    { publisher: publisher.value },
    (data) => {
      if (data.success) {
        list.value = data.data.data
        page.value = data.data.pageBean
        return
      }
      ElMessageBox.alert(data.message, '查询错误')
    },
  )
}
// #endregion

//#region 视图的呈现模式，query,selector
const props = defineProps(['mode'])
const emit = defineEmits(['type-selected'])

onMounted(() => {
  query()
})

const selectType = (info) => {
  console.log('选中的分类', info)
  emit('type-selected', info)
}

//#endregion
</script>

<style scoped></style>
